import Vue from 'vue'
import App from './App.vue'

// 引入 vuex
import Vuex from 'vuex'
// 安装
Vue.use(Vuex)
// 创建仓库实例
const store = new Vuex.Store({
  // 严格模式, 保证所有数据都是统一由 mutations 修改
  strict: true,
  // state 用来存放所有状态数据
  state: {
    myname: '小明',
    count: 0,
    list: [1,2,3,4,5,6,7,8,9,10,666],
    // 现实项目的复杂数据
    student: {
      name: 'tom',
      age: 13,
      school: {
        name: '吉山幼儿园',
        address: {
          city: '广州',
          detail: '珠吉路 58 号'
        }
      }
    }
  },
  // mutations 是用来修改数据的函数集合
  mutations: {
    setCount(state, data) {
      // 默认第一个形参可以得到当前的数据 state 对象
      state.count += data
    }
  },
  // actions 是用来执行异步操作的
  actions: {
    asyncSetCount(store, data) {
      // 默认第一个形参是当前的仓库上下文
      store.commit('setCount', data)
      setTimeout(()=>{
        store.commit('setCount', data)
      }, 1000)
    }
  },
  // getters 可以输出派生数据
  getters: {
    filterList: state =>  state.list.filter(item => item > 5),
    // 这是下面的简写方式
    // filterList(state) {
      // 默认情况下 getters 可以接受到一个形参 state
    //   return state.list.filter(item => item > 5)
    // }
    // 一般在项目中, 都只是用来简化数据
    schoolAddr: state => state.student.school.address.detail
  }
})

Vue.config.productionTip = false

new Vue({
  // 挂载 vuex 实例
  store,
  render: h => h(App),
}).$mount('#app')
